
<template>
  <div id="ap">
    <img src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u4.png" class="one">
    <img src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u5.png" class="two">
    <img src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u3.png" class="three">
    <img src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u25.png" class="four">
    <h2><img src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u24.png">人力资源后台管理</h2>
    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
      <el-form-item prop="mobile">
        <el-input v-model="form.mobile" placeholder="请输入账号" prefix-icon="el-icon-user" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" placeholder="请输入密码" prefix-icon="el-icon-lock" show-password />
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.query" placeholder="请输入验证码" prefix-icon="el-icon-search">
          <template slot="append">{{ pan }}</template>
        </el-input></el-form-item>
      <el-form-item prop="isAgree">
        <el-checkbox v-model="form.isAgree">用户平台使用协议</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 370px;" @click="login">登录</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        mobile: process.env.NODE_ENV === 'development' ? '13800000004' : '',
        password: process.env.NODE_ENV === 'development' ? 'hm#qd@23!' : '',
        isAgree: process.env.NODE_ENV === 'development',
        query: ''
      },
      pan: '',
      rules: {
        mobile: [{ required: true, trigger: 'blur', message: '手机号不能为空' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确手机号码', trigger: 'blur' }],
        password: [{ required: true, trigger: 'blur', message: '密码不能为空' },
          { min: 3, max: 10, trigger: 'blur', message: '密码3-10位' }],
        isAgree: [{ validator(rule, value, callback) { value ? callback() : callback(new Error('请勾选协议')) } }]
      }
    }
  },
  created() {
    this.pan = `${Math.floor(Math.random() * 10)}` + `${Math.floor(Math.random() * 10)}` + `${Math.floor(Math.random() * 10)}` + `${Math.floor(Math.random() * 10)}`
  },
  methods: {
    login() {
      this.$refs.form.validate((ok) => {
        if (this.pan !== this.form.query) {
          this.$message.error('验证码不正确')
          this.form.query = ''
          this.pan = `${Math.floor(Math.random() * 10)}` + `${Math.floor(Math.random() * 10)}` + `${Math.floor(Math.random() * 10)}` + `${Math.floor(Math.random() * 10)}`
          return
        }
        if (ok) {
          this.$store.dispatch('user/login', this.form)
          this.$router.push('/')
        }
      })
    }
  }
}
</script>
<style lang="scss">
  * {
    padding: 0;
    margin: 0;
  }
  #ap {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      #3fccfd ,
       #996cfb
    );
    overflow: hidden;
    h2 {
      position: absolute;
      left:850px;
      top:110px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 60px;
      width: 400px;
      background-color: #fff;
      color: #3fccfd;
      img {
        margin-right: 10px;
        width: 40px;
        height: 35px;
      }
    };
    .one {
      position: absolute;
      top: -100px;
      right: 0px;
    }
    .two {
      position: absolute;
      top: 0px;
      left: 0px;
    }
    .three {
      position: absolute;
      top: 400px;
      right: 200px;
    }
    .four {
      position: absolute;
      top: 250px;
      right: 600px;
    }
    .el-form {
      position: absolute;
      left:850px;
      top:170px;
      width: 400px;
      background-color: #fff;
    }
  }
  .el-form-item__content {
    margin-left: 20px!important;
    margin-right: 20px!important;

  }
    .el-form-item:last-of-type{
      margin-bottom: 25px!important;
    }
    .el-input-group__append {
      color: #ff7733;
      font-weight: 700;
      letter-spacing: 2px;
    }
</style>
